<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生成绩管理系统</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f7fa;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ebeef5;
    }
    .student-list {
      height: 500px;
      overflow: auto;
      border: 1px solid #ebeef5;
      border-radius: 4px;
    }
    .student-item {
      padding: 15px;
      border-bottom: 1px solid #ebeef5;
      transition: background-color 0.3s;
    }
    .student-item:hover {
      background-color: #f5f7fa;
    }
    .student-name {
      font-weight: bold;
      color: #409EFF;
      cursor: pointer;
    }
    .action-buttons {
      display: flex;
      gap: 10px;
    }
    .form-container {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      background-color: #fafafa;
    }
    .stats {
      margin-top: 20px;
      padding: 15px;
      background-color: #f0f9eb;
      border-radius: 4px;
      color: #67C23A;
    }
    .sort-header {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .sort-icon {
      margin-left: 5px;
      color: #c0c4cc;
      font-size: 12px;
    }
    .sort-icon.active {
      color: #409EFF;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <div class="header">
        <h2>学生成绩管理系统</h2>
        <el-button type="primary" @click="showAddDialog = true">添加学生</el-button>
      </div>

      <div class="filter-container">
        <el-input
          v-model="searchQuery"
          placeholder="搜索学生姓名"
          style="width: 300px; margin-right: 15px;"
          clearable
        />
      </div>

      <div class="student-list">
        <div style="display: flex; padding: 10px 15px; background: #f5f7fa; font-weight: bold;">
          <div style="flex: 2;">
            <span class="sort-header" @click="sortByField('name')">
              姓名
              <span class="sort-icon" :class="{ active: sortField === 'name' }">
                {{ sortField === 'name' ? (sortOrder === 'asc' ? '↑' : '↓') : '⇅' }}
              </span>
            </span>
          </div>
          <div style="flex: 1; text-align: center;">
            <span class="sort-header" @click="sortByField('math')">
              数学
              <span class="sort-icon" :class="{ active: sortField === 'math' }">
                {{ sortField === 'math' ? (sortOrder === 'asc' ? '↑' : '↓') : '⇅' }}
              </span>
            </span>
          </div>
          <div style="flex: 1; text-align: center;">
            <span class="sort-header" @click="sortByField('english')">
              英语
              <span class="sort-icon" :class="{ active: sortField === 'english' }">
                {{ sortField === 'english' ? (sortOrder === 'asc' ? '↑' : '↓') : '⇅' }}
              </span>
            </span>
          </div>
          <div style="flex: 1; text-align: center;">
            <span class="sort-header" @click="sortByField('average')">
              平均分
              <span class="sort-icon" :class="{ active: sortField === 'average' }">
                {{ sortField === 'average' ? (sortOrder === 'asc' ? '↑' : '↓') : '⇅' }}
              </span>
            </span>
          </div>
          <div style="flex: 1; text-align: right;">
            操作
          </div>
        </div>

        <div v-for="student in filteredStudents" :key="student.id" class="student-item">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <div style="flex: 2;">
              <span class="student-name" @click="showStudentDetail(student)">{{ student.name }}</span>
              <span style="margin-left: 15px; color: #909399;">ID: {{ student.id }}</span>
            </div>
            <div style="flex: 1; text-align: center;">
              <span>{{ student.math }}</span>
            </div>
            <div style="flex: 1; text-align: center;">
              <span>{{ student.english }}</span>
            </div>
            <div style="flex: 1; text-align: center;">
              <span>{{ student.average.toFixed(1) }}</span>
            </div>
            <div style="flex: 1; text-align: right;" class="action-buttons">
              <el-button type="danger" size="small" @click="deleteStudent(student.id)">删除</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="stats">
        共 {{ filteredStudents.length }} 名学生 |
        数学平均分: {{ mathAverage.toFixed(1) }} |
        英语平均分: {{ englishAverage.toFixed(1) }} |
        总平均分: {{ totalAverage.toFixed(1) }}
      </div>

      <!-- 添加学生对话框 -->
      <el-dialog v-model="showAddDialog" title="添加学生" width="500px">
        <el-form :model="newStudent" :rules="rules" ref="addForm">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="newStudent.name" placeholder="请输入学生姓名"></el-input>
          </el-form-item>
          <el-form-item label="数学成绩" prop="math">
            <el-input-number
              v-model="newStudent.math"
              :min="0"
              :max="100"
              placeholder="请输入数学成绩"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="英语成绩" prop="english">
            <el-input-number
              v-model="newStudent.english"
              :min="0"
              :max="100"
              placeholder="请输入英语成绩"
            ></el-input-number>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showAddDialog = false">取消</el-button>
            <el-button type="primary" @click="addStudent">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 学生详情对话框 -->
      <el-dialog v-model="showDetailDialog" :title="`学生详情 - ${currentStudent?.name || ''}`" width="500px">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="学生ID">{{ currentStudent?.id }}</el-descriptions-item>
          <el-descriptions-item label="姓名">{{ currentStudent?.name }}</el-descriptions-item>
          <el-descriptions-item label="数学成绩">
            <el-tag :type="getScoreTagType(currentStudent?.math)">{{ currentStudent?.math }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="英语成绩">
            <el-tag :type="getScoreTagType(currentStudent?.english)">{{ currentStudent?.english }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="平均分">
            <el-tag type="success">{{ currentStudent?.average.toFixed(1) }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
        <template #footer>
          <el-button type="primary" @click="showDetailDialog = false">关闭</el-button>
        </template>
      </el-dialog>
    </div>
  </div>

  <script>
    const { createApp, ref, computed } = Vue;

    createApp({
      setup() {
        // 学生数据
        const students = ref([
          { id: 1, name: "张黎微", math: 90, english: 85 },
          { id: 2, name: "李紫闵", math: 78, english: 92 },
          { id: 3, name: "王桁", math: 88, english: 76 },
          { id: 4, name: "赵俞", math: 65, english: 82 },
          { id: 5, name: "钱冰冰", math: 92, english: 88 },
          { id: 6, name: "孙巧", math: 72, english: 68 },
          { id: 7, name: "周淮", math: 85, english: 79 },
          { id: 8, name: "吴所谓", math: 95, english: 91 },
          { id: 9, name: "郑尧", math: 81, english: 84 },
          { id: 10, name: "王玉", math: 76, english: 89 }
        ]);

        // 计算平均分
        const studentsWithAverage = computed(() => {
          return students.value.map(student => ({
            ...student,
            average: (student.math + student.english) / 2
          }));
        });

        // 搜索
        const searchQuery = ref('');

        // 排序
        const sortField = ref('name');
        const sortOrder = ref('asc');

        // 点击表头排序
        const sortByField = (field) => {
          if (sortField.value === field) {
            // 如果点击的是当前排序字段，则切换排序顺序
            sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
          } else {
            // 如果点击的是新字段，则默认升序
            sortField.value = field;
            sortOrder.value = 'asc';
          }
        };

        // 过滤和排序后的学生列表
        const filteredStudents = computed(() => {
          let result = [...studentsWithAverage.value];

          // 搜索过滤
          if (searchQuery.value) {
            result = result.filter(student =>
              student.name.includes(searchQuery.value)
            );
          }

          // 排序
          result.sort((a, b) => {
            const valueA = a[sortField.value];
            const valueB = b[sortField.value];

            // 字符串比较
            if (typeof valueA === 'string') {
              return sortOrder.value === 'asc'
                ? valueA.localeCompare(valueB)
                : valueB.localeCompare(valueA);
            }
            // 数字比较
            else {
              return sortOrder.value === 'asc'
                ? valueA - valueB
                : valueB - valueA;
            }
          });

          return result;
        });

        // 统计信息
        const mathAverage = computed(() => {
          if (studentsWithAverage.value.length === 0) return 0;
          const sum = studentsWithAverage.value.reduce((acc, student) => acc + student.math, 0);
          return sum / studentsWithAverage.value.length;
        });

        const englishAverage = computed(() => {
          if (studentsWithAverage.value.length === 0) return 0;
          const sum = studentsWithAverage.value.reduce((acc, student) => acc + student.english, 0);
          return sum / studentsWithAverage.value.length;
        });

        const totalAverage = computed(() => {
          if (studentsWithAverage.value.length === 0) return 0;
          const sum = studentsWithAverage.value.reduce((acc, student) => acc + student.average, 0);
          return sum / studentsWithAverage.value.length;
        });

        // 添加学生
        const showAddDialog = ref(false);
        const newStudent = ref({
          name: '',
          math: null,
          english: null
        });
        const addForm = ref(null);

        const rules = {
          name: [
            { required: true, message: '请输入学生姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
          ],
          math: [
            { required: true, message: '请输入数学成绩', trigger: 'blur' }
          ],
          english: [
            { required: true, message: '请输入英语成绩', trigger: 'blur' }
          ]
        };

        const addStudent = () => {
          addForm.value.validate(valid => {
            if (valid) {
              const newId = students.value.length > 0
                ? Math.max(...students.value.map(s => s.id)) + 1
                : 1;

              students.value.push({
                id: newId,
                name: newStudent.value.name,
                math: newStudent.value.math,
                english: newStudent.value.english
              });

              resetNewStudent();
              showAddDialog.value = false;
              ElMessage.success('学生添加成功');
            }
          });
        };

        const resetNewStudent = () => {
          newStudent.value = {
            name: '',
            math: null,
            english: null
          };
        };

        // 删除学生
        const deleteStudent = (id) => {
          ElMessageBox.confirm('确定要删除该学生吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            students.value = students.value.filter(student => student.id !== id);
            ElMessage.success('删除成功');
          }).catch(() => {
            ElMessage.info('已取消删除');
          });
        };

        // 查看学生详情
        const showDetailDialog = ref(false);
        const currentStudent = ref(null);

        const showStudentDetail = (student) => {
          currentStudent.value = student;
          showDetailDialog.value = true;
        };

        const getScoreTagType = (score) => {
          if (score >= 90) return 'success';
          if (score >= 80) return '';
          if (score >= 60) return 'warning';
          return 'danger';
        };

        return {
          students,
          studentsWithAverage,
          searchQuery,
          sortField,
          sortOrder,
          filteredStudents,
          mathAverage,
          englishAverage,
          totalAverage,
          showAddDialog,
          newStudent,
          addForm,
          rules,
          addStudent,
          deleteStudent,
          showDetailDialog,
          currentStudent,
          showStudentDetail,
          getScoreTagType,
          sortByField
        };
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>
</html>